<template>
  <div
    class="app"
    style="overflow: scroll;"
  >
    <div class="m-top">
      <div class="wrap f-cb">
        <h1 class="logo"><a>网易云音乐</a></h1>
        <ul class="m-nav j-tflag">
          <li class="fst">
            <span>
              <router-link to="/find">
                <em>发现音乐</em><sub class="cor">&nbsp;</sub></router-link>
            </span>
          </li>
          <li>
            <span>
              <router-link to="/my"><em>我的音乐</em><sub class="cor">&nbsp;</sub></router-link>
            </span>
          </li>
          <li>

            <span>
              <router-link to="/friend"><em>朋友</em><sub class="cor">&nbsp;</sub><i class="dot j-t"></i></router-link>
            </span>
          </li>
          <li>
            <span><a
                href="https://music.163.com/store/product"
                target="_blank"
                data-module="store"
              ><em>商城</em></a></span>
          </li>
          <li>
            <span><a
                hidefocus="true"
                href="https://music.163.com/nmusician/web/index#/"
                target="_blank"
                data-module="musician"
              ><em>音乐人</em></a></span>
          </li>
          <li class="lst">
            <span><a
                id="topbar-download-link"
                hidefocus="true"
                href="https://music.163.com/#/download"
                target="_blank"
              ><em>下载客户端</em></a></span><sup class="hot">&nbsp;</sup>
          </li>
        </ul>

        <div
          class="denglu"
          v-if="isDL"
        >
          <a
            href="#"
            class="logining"
            @click="logining"
          >登录</a>
          <div class="wu">
            <div class="inner">
            </div>
            <i class="arr"></i>
          </div>
        </div>

        <div
          class="xinxi"
          @mousemove="TXmousemove"
          @mouseout="TXmouseout"
          v-if="!isDL"
        >
          <div class="TXimg">
            <img
              :src="res.avatarUrl"
              alt=""
              class="TouX"
            >
            <a href=""></a>
            <i class="Num">4</i>
          </div>
          <a href="">周杰伦的摇头蘸酱</a>
          <div
            class="XXlist"
            @mousemove="XXmousemove"
            @mouseout="XXmouseout"
          >
            <ul class="Ul4">
              <li>
                <i class="Ibiaoq1"></i>
                我的主页
              </li>
              <li>
                <i class="Ibiaoq2"></i>
                我的消息
                <div class="hongdian">
                  <p>4</p>
                </div>
              </li>
              <li>
                <i class="Ibiaoq3"></i>
                我的等级
              </li>
              <li>
                <i class="Ibiaoq4"></i>
                VIP会员
              </li>
            </ul>
            <ul class="Ul2">
              <li>
                <i class="Ibiaoq3"></i>
                个人设置
              </li>
              <li>
                <i class="Ibiaoq4"></i>
                实名认证
              </li>
            </ul>
            <ul class="Ul1">
              <li
                @click="deleteToken"
                style="cursor: pointer;"
              >
                <i class="Ibiaoq4"></i>
                退出
              </li>
            </ul>
            <i class="arr"></i>
          </div>
        </div>

        <a
          href="#"
          class="ChuangZZ"
          @click="feiqi"
        >创作者中心</a>
        <div class="sousuo f-cb">
          <div class="srchbg">
            <span class="parent">
              <input
                type="text"
                name="srch"
                id="srch"
                @blur="Blur"
              >
              <label
                class="sousuoLB"
                @click="Focus"
              >音乐/视频/电台/用户</label>
            </span>
          </div>

          <div class="hide f-cb">

          </div>
          <span class="J-flag">

          </span>
          <div class="flag">

          </div>
        </div>
      </div>
    </div>
    <DengLu
      class="dengLu"
      style="position: absolute;z-index:10001;top:117px;left:504px;display:none;"
    ></DengLu>
    <router-view></router-view>
    <footer>
      <div
        class="wapper"
        @click="wapper"
      >
        <!-- <img src="./assets/cyzimgs/jiantou.jpg" alt=""> -->
      </div>
      <div class="foo-mian">
        <div class="main">
          <div class="copy">
            <p
              class="link"
              id="music-link"
            >
              <a
                href="//st.music.163.com/official-terms/service"
                target="_blank"
                class="item s-fc4"
              >服务条款</a><span class="line">|</span>
              <a
                href="//st.music.163.com/official-terms/privacy"
                target="_blank"
                class="item s-fc4"
              >隐私政策</a><span class="line">|</span>
              <a
                href="//st.music.163.com/official-terms/children"
                target="_blank"
                class="item s-fc4"
              >儿童隐私政策</a><span class="line">|</span>
              <a
                href="//music.163.com/st/staticdeal/complaints.html"
                target="_blank"
                class="item s-fc4"
              >版权投诉指引</a><span class="line">|</span>
              <a
                id="g_feedback"
                href="#"
                class="item s-fc4"
                onclick="nm.x.feedback();return false;"
                hidefocus="true"
              >意见反馈</a>
              <span class="line">|</span><a class="s-fc4"></a>
            </p>
            <p class="right s-fc3">
              <span class="sep span">网易公司版权所有©1997-2020</span><span class="span">杭州乐读科技有限公司运营：</span><a
                href="https://p1.music.126.net/Mos9LTpl6kYt6YTutA6gjg==/109951164248627501.png"
                target="_blank"
                class="alink s-fc3"
              >浙网文[2018]3506-263号</a>
            </p>
            <p class="contact s-fc3">
              <span class="sep span">违法和不良信息举报电话：0571-89853516</span>
              <span class="span">举报邮箱：</span><a
                class="alink"
                href="mailto:ncm5990@163.com"
              >ncm5990@163.com</a>
            </p>

            <p class="rights s-fc3">
              <span class="sep span">粤B2-20090191-18</span><a
                href="http://www.beian.miit.gov.cn/publish/query/indexFirst.action"
                rel="noopener noreferrer"
                target="_blank"
                class="alink s-fc3"
              >工业和信息化部备案管理系统网站</a>
              <a
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010902002564"
                rel="noopener noreferrer"
                target="_blank"
                class="alink s-fc3 police-link"
              >
                <span
                  class="JH"
                  style="width: 14px;
                  height: 14px;
                  no-repeat;
                  background-size: cover;
                  display: inline-block;
                  margin-right: 2px;
                  vertical-align: -2px;"
                ></span>
                <span class="police-text">浙公网安备 33010902002564号</span>
              </a>
            </p>
          </div>

          <ul class="enter">
            <li class="unit">
              <a
                class="logo logonew logo-amped f-tid"
                href="https://web-amped.music.163.com/"
                target="_blank"
              ></a>
              <span class="tt tt-amped"></span>
            </li>
            <li class="unit">
              <a
                class="logo logonew logo-auth f-tid"
                href="//music.163.com/st/userbasic#/auth"
                target="_blank"
              ></a>
              <span class="tt tt-auth"></span>
            </li>
            <li class="unit">
              <a
                class="logo logonew logo-musician f-tid"
                href="//music.163.com/recruit"
                target="_blank"
              ></a>
              <span class="tt tt-musician"></span>
            </li>
            <li class="unit">
              <a
                class="logo logonew logo-reward f-tid"
                href="//music.163.com/web/reward"
                target="_blank"
              ></a>
              <span class="tt tt-reward"></span>
            </li>
            <li class="unit">
              <a
                class="logo logonew logo-cash f-tid"
                href="//music.163.com/uservideo#/plan"
                target="_blank"
              ></a>
              <span class="tt tt-cash"></span>
            </li>
          </ul>

        </div>
      </div>
    </footer>
    <div class="FooBF">
      <DBbofeng></DBbofeng>
    </div>

    <!-- 回到顶部 -->
    <!-- Scroll down to see the bottom-right button. -->

  </div>
</template>
<script>
import DengLu from "./components/DengLu/index"
import DBbofeng from './components/DBbofang/index'
export default {
  data: () => ({
     isDL:true,
     res:{}
  }),
  created() {
    let s=localStorage.getItem("token")
    if(s){
      this.isDL=false
    }
    let ress=localStorage.getItem("RXX")
    this.res=JSON.parse(ress)
    this.posyGQid()
  },
  mounted() {
     document.addEventListener('scroll',this.Scroll, true)
  },
  updated() {
    //  console.log(this.$store.state)
  },
  methods: {
    Scroll(){
      let wapper=document.querySelector(".wapper")
      let height=document.body.clientHeight/2
    // console.log(document.body.clientHeight)
    if(document.documentElement.scrollTop>height){
      wapper.style.display="block"
    }else{
      wapper.style.display="none"
    }
 },
    wapper(){
      //滚动条高度
      var timer,speed=80;
      timer=setInterval(()=>{
        document.documentElement.scrollTop-=speed
        if(document.documentElement.scrollTop==0){
          clearInterval(timer)
        }
      },10)
      console.log(document.documentElement.scrollTop)
      // document.documentElement.scrollTop=0
      
    },
     async posyGQid(){
      const res=await this.Api.cyzApi.posyGQid()
      // console.log(res) 
    },
    feiqi(){
      this.ceshi()
    },
    async ceshi(){
      try {
        const res=await this.Api.cyzApi.ceshi()
      console.log(res)
      } catch (error) {
        console.log(error)
      }
    },

    deleteToken(){
      localStorage.removeItem("token")
      this.$store.commit('DeleteUser')
      localStorage.removeItem("User")
      localStorage.removeItem("RXX")
      history.go(0)
    },
    Focus(){
      let srch=document.querySelector("#srch")
      let LB=document.querySelector(".sousuoLB")
      srch.focus()
      LB.innerHTML=""
    },
    Blur(){
      let srch=document.querySelector("#srch")
       let LB=document.querySelector(".sousuoLB")
      if(srch.value == ""){
        LB.innerHTML="音乐/视频/电台/用户"
      }
    },
    logining(){
      let phoneLogin=document.querySelector(".phoneLogin")
      let dengLu=document.querySelector(".dengLu")
      let dengluTao=document.querySelector(".dengluTao")
      let ZDL=document.querySelector(".ZDL")
      dengLu.style.display="block"
      // dengluTao.style.display="block"
      // phoneLogin.style.display="none"
      ZDL.style.display="none"
    },
    TXmousemove(){
      let Num=document.querySelector(".Num")
      let XXlist=document.querySelector(".XXlist")
      Num.style.display="none"
      XXlist.style.display="block"
    },
    TXmouseout(){
      let Num=document.querySelector(".Num")
      let XXlist=document.querySelector(".XXlist")
      Num.style.display="block"
      XXlist.style.display="none"
    },
    XXmousemove(){
      let Num=document.querySelector(".Num")
      let XXlist=document.querySelector(".XXlist")
      Num.style.display="none"
      XXlist.style.display="block"
    },
    XXmouseout(){
      let Num=document.querySelector(".Num")
      let XXlist=document.querySelector(".XXlist")
      Num.style.display="block"
      XXlist.style.display="none"
    },

  },
  components:{
    DengLu,
    DBbofeng
  }
};
</script>
<style lang="less" scoped>
.app {
    font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    .f-cb:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    }
  em,
  i {
    font-style: normal;
    text-align: left;
    font-size: inherit;
  }
  li {
    list-style: none;
  }
  a {
    cursor: pointer;
    text-decoration: none;
    color: #333;
  }
  .m-top {
    position: relative;
    z-index: 1000;
    height: 70px;
    box-sizing: border-box;
    background: #242424;
    border-bottom: 1px solid #000;
    .wrap {
      width: 1100px;
      margin: 0 auto;
      .logo {
        float: left;
        width: 176px;
        height: 69px;
        background: url("../src/assets/topbar.png") no-repeat 0 9999px;
        background-position: 0 0;
        a {
          float: left;
  // transition: all 1s;
          width: 157px;
          height: 100%;
          padding-right: 20px;
          text-indent: -9999px;
        }
      }
      .m-nav {
        float: left;
        a {
          padding: 0 19px;
          text-align: center;
          line-height: 70px;
          color: #ccc;
        }
        a:hover,
        a.z-slt {
          background: #000;
          text-decoration: none;
          color: #fff;
          .cor {
            display: block;
            position: absolute;
            left: 50%;
            top: 64px;
            width: 12px;
            height: 7px;
            margin-left: -6px;
            overflow: hidden;
            background: url("../src/assets/topbar.png") no-repeat 0 9999px;
            background-position: -226px 0;
          }
        }
        li {
          float: left;
          height: 70px;
          font-size: 14px;
          position: relative;
          background-position: right -300px;
          span {
            background: none;
            float: left;
            height: 70px;
            font-size: 14px;
            a {
              float: left;
              height: 70px;
              font-size: 14px;
            }
          }
        }
        .hot {
          display: block;
          position: absolute;
          top: 21px;
          left: 100px;
          width: 28px;
          height: 19px;
          background: url("../src/assets/topbar.png") no-repeat 0 9999px;
          background-position: -190px 0;
        }
        .dot {
          display: block;
          position: absolute;
          top: 24px;
          left: 54px;
          width: 6px;
          height: 6px;
          border-radius: 6px;
          background: #c20c0c;
        }
      }


      .xinxi{
          // display: none;


          float: right;
          height: 45px;
          margin: 19px 0 0 20px;
          padding: 0 22px 0 0;
          background: url('./assets/cyzimgs/xuebitu10.png');
          background-position: right -47px;
          background-image: none;
          position: relative;
          zoom: 1;
            .TXimg{
              margin-top: 1px;
              width: 30px;
              height: 30px;
              float: left;
              position: relative;
              zoom: 1;
              word-break: break-word;
                .TouX{
                  border-radius: 30px;
                  width: 30px;
                  height: 30px;
                  border: 0;
                }
                a{
                  cursor: pointer;
                  text-decoration: none;
                  color: #333;
                }
                i{
                  top: -5px;
                  left: 20px;
                  display: inline-block;
                  min-width: 17px;
                  height: 17px;
                  padding: 0 4px;
                  box-sizing: border-box;
                  background: #C20C0C;
                  border-radius: 18px;
                  border: 1px solid #242424;
                  line-height: 16px;
                  font-size: 12px;
                  white-space: nowrap;
                  color: #fff;
                  text-align: center;
                  position: absolute;
                  font-style: normal;
                }
            }
            a{
              max-width: 100px;
              margin: 8px 0 0 8px;
              line-height: 17px;
              color: #adadad;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;text-decoration: none;
              display: none !important;
              float: left;
              cursor: pointer;
            }
            .XXlist{

              
              padding-top:10px ;
              display: none;
              
              position: absolute;
              top: 38px;
              right: -43px;
              width: 158px;
              background: #2b2b2b;
              border: 1px solid #202020;
              box-shadow: 0 8px 24px 0 rgba(0,0,0,0.50);
              border-radius: 4px;
                .Ul4{
                  padding: 0;
                  margin: 0;
                  word-break: break-word;
                    li{
                      cursor: pointer;
                      line-height: 34px;
                      text-indent: 1em;
                      height: 34px;
                      float: left;
                      box-sizing: border-box;
                      width: 100%;
                      list-style: none;
                      word-break: break-word;
                      color:#ccc;
                      position: relative;
                      .hongdian{
                              width: 15px;
                              height: 15px;
                              background: #c20c0c;
                              border-radius: 50%;
                              border: 1px solid black;
                              position: absolute;
                             left: 110px;
                              top: 8px;
                              p{
                                font-size: 12px;
                                position: absolute;
                                top: -9px;
                                left: -7px;
                              }
                            }
                        .Ibiaoq1{
                          display: block;
                          margin: 8px 0 0 20px;
                          float: left;
                          width: 18px;
                          height: 18px;
                          background: url('./assets/cyzimgs/xuebitu11.png');
                          background-position: 0px -571px;
                        }
                        .Ibiaoq2{
                          display: block;
                          margin: 8px 0 0 20px;
                          float: left;
                          width: 18px;
                          height: 18px;
                          background: url('./assets/cyzimgs/xuebitu11.png');
                          background-position: -21px -365px;
                        }
                        .Ibiaoq3{
                          display: block;
                          margin: 8px 0 0 20px;
                          float: left;
                          width: 18px;
                          height: 18px;
                          background: url('./assets/cyzimgs/xuebitu11.png');
                          background-position: 0px -591px;
                        }
                        .Ibiaoq4{
                          display: block;
                          margin: 8px 0 0 20px;
                          float: left;
                          width: 18px;
                          height: 18px;
                          background: url('./assets/cyzimgs/xuebitu11.png');
                          background-position: 0px -710px;
                        }
                    }
                    li:hover{
                      background: #444444;
                      color: #fff;
                    }
                }
                .Ul4::after{
                  clear: both;
                  content: '.';
                  display: block;
                  height: 0;
                  visibility: hidden;
                }
                .Ul2{
                  border: 1px solid #232323;
                  border-width: 1px 0;
                    li{
                      cursor: pointer;
                      line-height: 34px;
                      text-indent: 1em;
                      height: 34px;
                      float: left;
                      box-sizing: border-box;
                      width: 100%;
                      list-style: none;
                      word-break: break-word;
                      color:#ccc;
                         .Ibiaoq3{
                          display: block;
                          margin: 8px 0 0 20px;
                          float: left;
                          width: 18px;
                          height: 18px;
                          background: url('./assets/cyzimgs/xuebitu11.png');
                          background-position:0px -384px;;
                        }
                        .Ibiaoq4{
                          display: block;
                          margin: 8px 0 0 20px;
                          float: left;
                          width: 18px;
                          height: 18px;
                          background: url('./assets/cyzimgs/xuebitu11.png');
                          background-position: 32px -877px;
                        }
                    }
                }
                .Ul2::after{
                  clear: both;
                  content: '.';
                  display: block;
                  height: 0;
                  visibility: hidden;
                }
                .Ul1{
                  padding: 0;
                  margin: 0;
                    li{
                      cursor: pointer;
                      line-height: 34px;
                      text-indent: 1em;
                      height: 34px;
                      float: left;
                      box-sizing: border-box;
                      width: 100%;
                      list-style: none;
                      word-break: break-word;
                      color:#ccc;
                        .Ibiaoq4{
                          display: block;
                          margin: 8px 0 0 20px;
                          float: left;
                          width: 18px;
                          height: 18px;
                          background: url('./assets/cyzimgs/xuebitu11.png');
                          background-position: 0px -934px;
                        }
                    }
                }
                .Ul1::after{
                  clear: both;
                  content: '.';
                  display: block;
                  height: 0;
                  visibility: hidden;
                }
                .arr{
                  margin-left: -8px;
                  position: absolute;
                  top: -8px;
                  left: 50%;
                  width: 14px;
                  height: 8px;
                  background: url('./assets/cyzimgs/xuebitu11.png');
                  margin-left: -7px;
                  background-position: -20px 0;
                }
            }
      }


      .denglu{
        // display: none;

        float: right;
        height: 45px;
        margin: 19px 0 0 20px;
        padding: 0 22px 0 0;
        background: url('./assets/cyzimgs/xuebitu10.png');
        background-position: right -47px;
        background-image: none;
        position: relative;
        zoom: 1;
          a{
            display: block;
            width: 28px;
            margin-top: 7px;
            color: #787878;
            outline: none;
            cursor: pointer;
          }
          a:hover{
            text-decoration: underline;
            color:#999;
          }
          .wu{
            position: absolute;
            top: 38px;
            right: -43px;
            width: 158px;
            background: #2b2b2b;
            border: 1px solid #202020;
            box-shadow: 0 8px 24px 0 rgba(0,0,0,0.50);
            border-radius: 4px;
              .inner{
                display: block;
              }
              .arr{
                  position: absolute;
                  top: -8px;
                  left: 50%;
                  width: 14px;
                  height: 8px;
                  margin-left: -7px;
                  background: url('./assets/cyzimgs/xuebitu11.png');
                  background-position: -20px 0;
                  font-style: normal;
                  text-align: left;
                  font-size: inherit;
              }
          }
      }
      .ChuangZZ{
        float: right;
        width: 90px;
        height: 32px;
        margin: 19px 0 0 12px;
        box-sizing: border-box;
        padding-left: 16px;
        border: 1px solid #4F4F4F;
        line-height: 33px;
        color: #ccc;
        border-radius: 20px;
        background: url('./assets/cyzimgs/xuebitu10.png');
        background-position: 0 -140px;
        background: none!important;
        position: relative;
        zoom: 1;
      }
      .ChuangZZ:hover{
        color:#fff;
      }

      .sousuo{
        float: right;
        width: 158px;
        height: 32px;
        position: relative;
        zoom: 1;
          .srchbg{
            margin-top: 19px;
            border-radius: 32px;
            float: right;
            width: 158px;
            height: 32px;
            background: url('./assets/cyzimgs/xuebitu12.png');
            background-position: 0 -99px;
            background-color: #fff;
              .parent{
                  display: block;
                  position: relative;
                  margin: 8px 0 0 30px;
                  #srch{
                    opacity: 1;
                    color: #333;
                    line-height: 16px;
                    width: 95%;
                    margin: 0;
                    padding: 0;
                    // background: transparent;
                    border: 0;
                    font-size: 12px;
                    border: none;
                    outline: none;
                  }
                  .sousuoLB{
                      display: block;
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 90%;
                      color: #9b9b9b;
                      cursor: text;
                  }
              }
          } 
          .hide{
                position: absolute;
                top: 108px;
                left: 16px;
                width: 180px;
                height: 40px;
                line-height: 40px;
                background-color: #fe5555;
                color: #fff;
                text-align: center;
                border-radius: 3px;
                font-size: 16px;
                display: none !important;
                position: absolute;
                top: -50px;
                left: 88px;
                content: '';
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #fe5555;
          }
          .J-flag{
            display: none;
          }
          .flag{
            display: none;
            clear: both;
    top: 59px;
    width: 240px;
    position: absolute;
    z-index: 120;
    left: 0;
    box-sizing: border-box;
    border: 1px solid #bebebe;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 7px #555;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
          }
      }
    }
  }
  footer{
    position: relative;
    height: 172px;
    overflow: hidden;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;
    display: block;
    word-break: break-word;
    .wapper{
      display: none;
      // border: 1px solid #ccc;
      // box-shadow: 2px 2px 1px 2px #ccc;
     cursor: pointer;
      position: fixed;
      top: 600px;
      z-index: 100000000;
      right: 115px;
      width: 50px;
      height: 50px;
      background: url('./assets/cyzimgs/jiantou.jpg');
      background-size: 100% 100%;
    }
      .foo-mian{
        width: 980px;
        margin: 0 auto;
        word-break: break-word;
          .main{
            display: block;
            word-break: break-word;
              .copy{
                float: left;
                width: 520px;
                padding-top: 15px;
                line-height: 24px;
                display: block;
                word-break: break-word;
                  .link{
                    padding: 0;
                    margin: 0;
                    float: left;
                    width: 520px;
                    // padding-top: 15px;
                    line-height: 24px;
                    word-break: break-word;
                      a{
                        cursor: pointer;
                        color: #999;
                        text-decoration: none;
                      }
                      span{
                        margin: 0 8px 0 10px;
                         color: #c2c2c2;
                      }
                  }
                  .right{
                    color: #666;
                    padding: 0;
                    margin: 0;
                    float: left;
                    width: 520px;
                    line-height: 24px;
                  }
                  .contact{
                    color: #666;
                     padding: 0;
                    margin: 0;
                    float: left;
                    width: 520px;
                    line-height: 24px;
                  }
                  .rights{
                    color: #666;
                    padding: 0;
                    margin: 0;
                    float: left;
                    width: 520px;
                    // padding-top: 15px;
                    line-height: 24px;
                      .JH{
                        background: url('./assets/cyzimgs/jinghui.png');
                      }
                  }
              }
              .enter{
                  width: 420px;
                  margin-top: 33px;
                  float: right;
                  padding: 0;
                  li{
                    position: relative;
                    margin-left: 20px;
                    float: left;
                    width: 60px;
                    height: 70px;
                    text-align: center;
                    color: #666;
                    list-style: none;
                      a{
                        background: url('./assets/cyzimgs/xuebitu15.png') no-repeat;
                        background-size: 110px 552px;
                        background-position: -63px -456.5px;
                        display: block;
                        float: none;
                        width: 50px;
                        height: 45px;
                        margin: 0 auto;
                        text-indent: -9999px;
                        cursor: pointer;
                      }
                      span{
                        background: url('./assets/cyzimgs/xuebitu16.png') no-repeat;
                        background-size: 180px 139px;
                        background-position: 0 -108px;
                        margin-left: -6px;
                        width: 72px;
                        display: inline-block;
                        margin: 5px 5px 0;
                        width: 52px;
                        height: 14px;
                      }
                  }
                   li:nth-child(1){
                    span{
                      margin: 0;
                      position: absolute;
                      top: 51px;
                      left: -9px;
                      width: 80px;
                    }
                  }
                  li:nth-child(2){
                    a{
                      background-position: -63px -101.5px;
                    }
                    span{
                      background-position: 0 -90px;
                    }
                  }
                  li:nth-child(3){
                     a{
                      background-position: 2px -100.5px;
                    }
                    span{
                      background-position: 0 -72px;
                    }
                  }
                  li:nth-child(4){
                     a{
                      background-position: -63px -50.5px;
                    }
                    span{
                      background-position: 0 -54px;
                    }
                  }
                  li:nth-child(5){
                     a{
                      background-position: 0px 0.5px
                    }
                    span{
                      background-position: 0 -36px;
                    }
                  }
              }
          }
          .main::after{
            clear: both;
            content: '.';
            display: block;
            height: 0;
            visibility: hidden;
          }
      }
  }
  .FooBF{
    height: 46px;

    position: fixed;
    zoom: 1;
    bottom: 0;
    left: 0;
    right: 0;
    // height: 0;
    width: 100%;
    z-index: 1002;
  }
}
.vl-notify-mask{
  position: absolute;
  top: 0px;
  left: 0px;
}
.el-notification right{
  z-index: 10000;
}
</style>
